<!--综合态势-->
<template>
    <div class="leftView">
        <div class="shrink" @click="shows = !shows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: column">
                <div style="display: flex;flex-direction: row">
                    <!--前端设备告警数据-->
                    <div class="container height294"
                         :style="{ 'background-image': `url(${require('@/assets/bg_left.png')})` }">
                        <div class="container_title1">
                            <span>前端设备告警数据</span>
                        </div>
                        <div class="container-pieBox">
                            <div class="container-pieBox-pieChat" ref="yearChart"></div>
                            <div class="container-pieBox-pieChat" ref="monthChart"></div>
                            <div class="container-pieBox-pieChat" ref="protectionChart"></div>
                        </div>
                        <div class="container-pieName">
                            <div>年度告警数</div>
                            <div>月度告警数</div>
                            <div>环保设备<br/>年度告警数</div>
                        </div>
                        <div class="container-line"></div>
                        <div class="container-giveList">告警列表</div>
                        <div class="container-table">
                            <div class="container-table-header">
                                <div>事件标题</div>
                                <div>告警时间</div>
                                <div>处理状态</div>
                            </div>
                            <div class="container-table-subject userFlex" ref="tableContainer"
                                 @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                                <div class="container-table-subject-line" v-for="(item, i) in noticeData" :key="i">
                                    <div>{{ item.title }}</div>
                                    <div>{{ item.createTime }}</div>
                                    <div class="container-table-subject-line-status">
                                        <div class="container-table-subject-line-status-circle"></div>
                                        {{
                                        item.alarmStatus === "0" ? '告警' : item.alarmStatus === "1" ? '解除' : '未知状态'
                                        }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--能耗分析-->
                    <div class="container height294"
                         :style="{ 'background-image': `url(${require('@/assets/bg_left.png')})` }">
                        <div class="container_title1">
                            <span>能耗分析</span>
                        </div>
                        <div class="energy-gross">
                            <div></div>
                            <div class="energy-gross-right">
                                <div class="energy-gross-right-year"
                                     :style="{ 'color': tab === 1 ? '#00E6FF' : '#FFF' }"
                                     @click="switchToEnergyChart2(1)">季度
                                </div>
                                <div class="energy-gross-right-year"
                                     :style="{ 'color': tab === 2 ? '#00E6FF' : '#FFF' }"
                                     @click="switchToEnergyChart2(2)">年度
                                </div>
                            </div>
                        </div>
                        <div v-show="tab === 1">
                            <div class="pullDown">
                                <el-select v-model="monitorActiveName" placeholder="请选择"
                                           :popper-append-to-body="false"
                                           @change="selectTypeChange">
                                    <el-option v-for="(item, index) of monitorOptions" :key="index" :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="energy-lineBox" ref="energyChart"></div>
                        </div>
                        <div v-show="tab === 2" class="energy-lineBox" ref="energyCharts"></div>
                    </div>
                </div>
                <div style="display: flex;flex-direction: row;">
                    <div class="container height273"
                         :style="{ 'background-image': `url(${require('@/assets/bg_left.png')})` }">
                        <div class="container_title3">
                            <span>工业生产总值</span>
                        </div>
                        <div class="manufacture_barBox" ref="yieldChart"></div>
                    </div>
                    <div class="container height273"
                         :style="{ 'background-image': `url(${require('@/assets/bg_left.png')})` }">
                        <div class="container_title3">
                            <span>园区用地汇总统计</span>
                        </div>
                        <div class="site_barBox" ref="siteChart"></div>
                    </div>
                </div>

            </div>
        </transition>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {getAlarmNotice, getConsumption, getEnergy, getLand} from "@/api/synthesis/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            typeData: [],
            tab: 1,
            shows: true,
            QUARTER: {
                'type': 'QUARTER',
                'year': 2023
            },
            year: {
                'type': 'YEAR'
            },
            selectedType: this.QUARTER,
            //前端设备报警数据
            noticeData: [],
            tableList: [
                {title: "预警事件1", time: "2023-07-08 15:07:43", states: "已解除"},
                {title: "预警事件2", time: "2023-07-10 00:58:05", states: "已解除"},
                {title: "预警事件3", time: "2023-07-11 10:57:32", states: "已解除"},
            ],
            monitorActiveName: '',
            monitorOptions: [
                {value: 'firstQuarter', label: '第一季度'},
                {value: 'twoQuarter', label: '第二季度'},
                {value: 'thirdQuarter', label: '第三季度'},
                {value: 'fourthQuarter', label: '第四季度'},
            ],
            currentChart: 'energyChart',
            scrollSpeed: 70, // 调整滚动速度，数值越小滚动越快
            scrollInterval: null,
        }
    },
    mounted() {
        // 能耗分析
        // this.getConsumption()
        this.getAlarmNotice()
        this.getEnergy()
        this.switchToEnergyChart2(this.tab)
        //园区用地汇总统计
        this.getLand()
        this.startAutoScroll();
        this.setDefaultQuarter();
    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    computed: {
        getStatusText() {
            return (alarmStatus) => (alarmStatus === 0 ? '告警' : alarmStatus === 1 ? '解除' : '未知状态');
        },
    },
    methods: {
        setDefaultQuarter() {
            const now = new Date();
            const currentMonth = now.getMonth() + 1;
            let defaultQuarter = 'thirdQuarter'; // Set the default to thirdQuarter

            if (currentMonth >= 1 && currentMonth <= 3) {
                defaultQuarter = 'firstQuarter';
            } else if (currentMonth >= 4 && currentMonth <= 6) {
                defaultQuarter = 'twoQuarter';
            } else if (currentMonth >= 7 && currentMonth <= 9) {
                defaultQuarter = 'thirdQuarter';
            } else if (currentMonth >= 10 && currentMonth <= 12) {
                defaultQuarter = 'fourthQuarter';
            }

            this.monitorActiveName = defaultQuarter;
        },
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.tableContainer;
            const containerHeight = container.clientHeight;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
        // 能耗分析
        getConsumption() {
            let _this = this
            let params = this.selectedType
            getConsumption(params).then((res) => {
                if (this.tab === 1) {
                    _this.initLine(res.data.value)
                } else {
                    _this.initLines(res.data)
                }
                console.log(res, '能耗分析')
            })
        },
        selectTypeChange() {
            this.getConsumption()
        },
        //耗能分析 - 季度
        initLine(data) {
            const myEchart = echarts.init(this.$refs.energyChart);
            let quarter1 = data.slice(0, 3)
            let quarter2 = data.slice(3, 6)
            let quarter3 = data.slice(6, 9)
            let quarter4 = data.slice(9, 12)
            let option = {};
            console.log(data, '耗能分析图表')
            if (this.monitorActiveName === 'firstQuarter') {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(34, 40, 46, 0.7)',
                        borderWidth: "0", //边框宽度设置1
                        borderColor: "", //设置边框颜色
                        textStyle: {
                            color: '#fff',
                        },
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            },
                        },
                    },
                    grid: {
                        top: '15%',
                        left: '17%',
                        right: '5%',
                        bottom: '10%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            show: false,
                            color: '#FFFFFF'
                        },

                        axisLabel: {
                            color: '#FFFFFF',
                            width: 100
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: ["1月", "2月", "3月"] //this.$moment(data.times).format("HH-mm") ,

                    }],
                    yAxis: [{
                        type: 'value',
                        name: "单位(kw h)",
                        nameTextStyle: {
                            padding: [0, 0, 0, 0], // 上右下左
                            color: "rgba(255, 255, 255, 0.80)"
                        },
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                                opacity: 0.23
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            textStyle: {
                                color: '#fff',

                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [
                        {
                            name: '用电',
                            type: 'line',
                            showAllSymbol: true,
                            symbol: 'circle',
                            symbolSize: 0,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    color: "rgba(98, 183, 255, 1)",
                                },
                            },
                            label: {
                                show: false,
                                position: 'top',
                                textStyle: {
                                    color: '#2CABE3',
                                }
                            },
                            itemStyle: {
                                color: "#fff",
                                borderColor: "#2CABE3",
                                borderWidth: 0,
                            },

                            data: quarter1 //data.values
                        },
                    ]
                };
                console.log("第一季度")
            } else if (this.monitorActiveName === 'twoQuarter') {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(34, 40, 46, 0.7)',
                        borderWidth: "0", //边框宽度设置1
                        borderColor: "", //设置边框颜色
                        textStyle: {
                            color: '#fff',
                        },
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            },
                        },
                    },
                    grid: {
                        top: '15%',
                        left: '17%',
                        right: '5%',
                        bottom: '10%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            show: false,
                            color: '#FFFFFF'
                        },

                        axisLabel: {
                            color: '#FFFFFF',
                            width: 100
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: ["4月", "5月", "6月"] //this.$moment(data.times).format("HH-mm") ,

                    }],
                    yAxis: [{
                        type: 'value',
                        name: "单位(kw h)",
                        nameTextStyle: {
                            padding: [0, 0, 0, -20], // 上右下左
                            color: "rgba(255, 255, 255, 0.80)"
                        },
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                                opacity: 0.23
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            textStyle: {
                                color: '#fff',

                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [
                        {
                            name: '用电',
                            type: 'line',
                            showAllSymbol: true,
                            symbol: 'circle',
                            symbolSize: 0,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    color: "rgba(98, 183, 255, 1)",
                                },
                            },
                            label: {
                                show: false,
                                position: 'top',
                                textStyle: {
                                    color: '#2CABE3',
                                }
                            },
                            itemStyle: {
                                color: "#fff",
                                borderColor: "#2CABE3",
                                borderWidth: 0,
                            },

                            data: quarter2 //data.values
                        },
                    ]
                };
                console.log("第二季度")
            } else if (this.monitorActiveName === 'thirdQuarter') {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(34, 40, 46, 0.7)',
                        borderWidth: "0", //边框宽度设置1
                        borderColor: "", //设置边框颜色
                        textStyle: {
                            color: '#fff',
                        },
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            },
                        },
                    },
                    grid: {
                        top: '15%',
                        left: '15%',
                        right: '5%',
                        bottom: '10%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            show: false,
                            color: '#FFFFFF'
                        },

                        axisLabel: {
                            color: '#FFFFFF',
                            width: 100
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: ["7月", "8月", "9月"] //this.$moment(data.times).format("HH-mm") ,

                    }],

                    yAxis: [{
                        type: 'value',
                        name: "单位(kw h)",
                        nameTextStyle: {
                            padding: [0, 0, 0, 0], // 上右下左
                            color: "rgba(255, 255, 255, 0.80)"
                        },
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                                opacity: 0.23
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            textStyle: {
                                color: '#fff',

                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [

                        {
                            name: '用电',
                            type: 'line',
                            showAllSymbol: true,
                            symbol: 'circle',
                            symbolSize: 0,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    color: "rgba(98, 183, 255, 1)",
                                },
                            },
                            label: {
                                show: false,
                                position: 'top',
                                textStyle: {
                                    color: '#2CABE3',
                                }
                            },
                            itemStyle: {
                                color: "#fff",
                                borderColor: "#2CABE3",
                                borderWidth: 0,
                            },

                            data: quarter3 //data.values
                        },
                    ]
                };
                console.log("第三季度")
            } else if (this.monitorActiveName === 'fourthQuarter') {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(34, 40, 46, 0.7)',
                        borderWidth: "0", //边框宽度设置1
                        borderColor: "", //设置边框颜色
                        textStyle: {
                            color: '#fff',
                        },
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            },
                        },
                    },
                    grid: {
                        top: '15%',
                        left: '17%',
                        right: '5%',
                        bottom: '10%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            show: false,
                            color: '#FFFFFF'
                        },

                        axisLabel: {
                            color: '#FFFFFF',
                            width: 100
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: ["10月", "11月", "12月"] //this.$moment(data.times).format("HH-mm") ,

                    }],
                    yAxis: [{
                        type: 'value',
                        name: "单位(kw h)",
                        nameTextStyle: {
                            padding: [0, 0, 0, -10], // 上右下左
                            color: "rgba(255, 255, 255, 0.80)"
                        },
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#FFFFFF',
                                opacity: 0.23
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            textStyle: {
                                color: '#fff',

                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [
                        {
                            name: '用电',
                            type: 'line',
                            showAllSymbol: true,
                            symbol: 'circle',
                            symbolSize: 0,
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    color: "rgba(98, 183, 255, 1)",
                                },
                            },
                            label: {
                                show: false,
                                position: 'top',
                                textStyle: {
                                    color: '#2CABE3',
                                }
                            },
                            itemStyle: {
                                color: "#fff",
                                borderColor: "#2CABE3",
                                borderWidth: 0,
                            },

                            data: quarter4 //data.values
                        },
                    ]
                };
                console.log("第四季度")
            }
            myEchart.setOption(option);
        },
        // 耗能分析- 年度
        initLines(data) {
            const myEchart = echarts.init(this.$refs.energyCharts);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let xData = data.year
            let value = data.value
            option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '15%',
                    left: '20%',
                    right: '5%',
                    bottom: '10%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false,
                        color: '#FFFFFF'
                    },

                    axisLabel: {
                        color: '#FFFFFF',
                        width: 100
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    data: xData //this.$moment(data.times).format("HH-mm") ,

                }],

                yAxis: [{
                    type: 'value',
                    name: "单位(kw h)",
                    nameTextStyle: {
                        padding: [0, 0, 0, -20], // 上右下左
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            opacity: 0.23
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',

                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [

                    {
                        name: '用电',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(98, 183, 255, 1)",
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#2CABE3',
                            }
                        },
                        itemStyle: {
                            color: "#fff",
                            borderColor: "#2CABE3",
                            borderWidth: 0,
                        },

                        data: value //data.values
                    },
                ]
            };
            myEchart.setOption(option);
        },
        //园区用地汇总统计
        getLand() {
            let _this = this
            getLand().then((res) => {
                _this.initSite(res.data)
                _this.typeData = Object.values(res.data);
                console.log(res.data, "园区用地汇总统计1")
            })
        },
        //前端设备告警数据/年度
        initPie(data) {
            const myEchart = echarts.init(this.$refs.yearChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let yearData = data.summary.year
            let year = 100 - data.summary.year
            // data.forEach((item) => {
            //     yearData.push(item.summary.year)
            //     // data.unshift(data)
            // })
            console.log(yearData, "年度")
            option = {

                title: [
                    {
                        text: yearData,
                        subtext: '条',
                        textStyle: {
                            fontSize: 16,
                            color: "#fff"
                        },
                        subtextStyle: {
                            fontSize: 14,
                            color: "#fff",
                            lineHeight: -5,
                        },
                        textAlign: "center",
                        x: '42%',
                        y: '31%',
                    }],
                color: ['rgba(255, 255, 255, 0.3)'],
                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['80%', '100%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: yearData,
                        name: '01',
                        itemStyle: {
                            normal: {
                                color: '#62B7FF',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '02',
                        value: year
                    }]
                }]
            }
            myEchart.setOption(option);
        },
        //前端设备告警数据/月度
        initPie2(data) {
            const myEchart = echarts.init(this.$refs.monthChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let monthData = data.summary.month
            let month = 100 - data.summary.month
            option = {
                title: [
                    {
                        text: monthData,
                        subtext: '条',
                        textStyle: {
                            fontSize: 16,
                            color: "#fff"
                        },
                        subtextStyle: {
                            fontSize: 14,
                            color: "#fff",
                            lineHeight: -5,
                        },
                        textAlign: "center",
                        x: '42%',
                        y: '31%',
                    }],
                color: ['rgba(255, 255, 255, 0.3)'],
                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['80%', '100%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: monthData,
                        name: '01',
                        itemStyle: {
                            normal: {
                                color: '#62B7FF',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '02',
                        value: month
                    }]
                }]
            }
            myEchart.setOption(option);
        },
        //前端设备告警数据/环保
        initPie3(data) {
            const myEchart = echarts.init(this.$refs.protectionChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let environmentData = data.summary.environment
            let environment = 100 - data.summary.environment
            option = {
                title: [
                    {
                        text: environmentData,
                        subtext: '条',
                        textStyle: {
                            fontSize: 16,
                            color: "#fff"
                        },
                        subtextStyle: {
                            fontSize: 14,
                            color: "#fff",
                            lineHeight: -5,
                        },
                        textAlign: "center",
                        x: '42%',
                        y: '31%',
                    }],
                color: ['rgba(255, 255, 255, 0.3)'],
                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['80%', '100%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: environmentData,
                        name: '01',
                        itemStyle: {
                            normal: {
                                color: '#62B7FF',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '02',
                        value: environment
                    }]
                }]
            }
            myEchart.setOption(option);
        },
        switchToEnergyChart2(value) {
            this.tab = value
            this.selectedType = this.QUARTER;
            if (value === 1) {
                this.selectedType = this.QUARTER;
            } else {
                this.selectedType = this.year;
            }
            this.getConsumption();
        },
        //工业生产总值
        initBar(barData) {
            const myEchart = echarts.init(this.$refs.yieldChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let currentMonth = new Date().getMonth(); // 获取当前系统时间的月份
            let xData = barData.data.month.slice(0, currentMonth + 1); // 限制 xData 到当前月份
            let maxXDataValue = Math.max(...xData);
            console.log(maxXDataValue, '最大值')
            // let xData = barData.data.month
            let lastYear = barData.data.lastYearGIOV.map((value) => Number(value.toFixed(2))); //去年数据
            let year = barData.data.curYearGIOV.map((value) => Number(value.toFixed(2))); //去年数据
            console.log(lastYear, year, '最大值')
            option = {
                tooltip: {
                    trigger: "axis",
                    position: ['50%', '40%'],
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    data: ['去年', '今年'],
                    align: 'right',
                    x: 'right',
                    y: '28',
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 20
                },
                grid: {
                    left: '3%',
                    right: '6%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: xData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.80)",
                            width: 1,
                            type: "solid"
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#00c7ff",
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    name: '单位（万元）',
                    nameTextStyle: {
                        padding: [0, 0, 0, -40], // 上右下左
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.80)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#063374",
                        }
                    }
                }],
                series: [{
                    name: '去年',
                    type: 'bar',
                    data: lastYear,
                    barWidth: 10, //柱子宽度
                    barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00E6FF'
                            }, {
                                offset: 1,
                                color: 'rgba(0, 230, 255, 0)'
                            }]),
                            opacity: 1,
                        }
                    }
                }, {
                    name: '今年',
                    type: 'bar',
                    data: year,
                    barWidth: 10,
                    barGap: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(255, 131, 46, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(255, 131, 46, 0)'
                            }]),
                            opacity: 1,
                        }
                    }
                }]
            };
            myEchart.setOption(option);
        },
        //园区用地汇总统计
        initSite(typeData) {
            const myEchart = echarts.init(this.$refs.siteChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let data = Object.values(typeData);
            let className = ['规划面积','批复面积','建成面积', '已建面积','核准面积','空地', '已批在建', '已批未建',    ];
            // 对 data 数组进行从大到小排序
            data.sort((a, b) => b - a);

// 创建一个新的数组，根据排序后的 data 数据生成对应的 className
            let sortedClassName = data.map(value => {
                let index = data.indexOf(value);
                return className[index];
            });
            console.log(data, "园区用地汇总统计")
            option = {
                title: [{
                    show: true,
                    subtext: '单位：平方公里',
                    subtextStyle: {
                        color: "rgba(255, 255, 255, 0.80)",
                        lineHeight: 20,
                    },
                    left: 0,
                    top: 0
                }],
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '0%',
                    top: '12%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: function (params) {
                        return params[0].name + '<br/>' +
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                            // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
                            params[0].seriesName + ' : ' + params[0].value
                    }
                },
                xAxis: {

                    show: false,
                    type: 'value'
                },
                yAxis: [{
                    type: 'category',

                    inverse: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.80)'
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: className
                }, {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.80)',
                            fontSize: '12'
                        },
                    },
                    data: data
                }],
                series: [{
                    name: '占地',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 1,
                                color: 'rgba(0, 230, 255, 1)'
                            }, {
                                offset: 0,
                                color: 'rgba(0, 230, 255, 0)'
                            }]),

                        },
                    },
                    barWidth: 15,
                    data: data
                },
                    // {
                    //     name: '背景',
                    //     type: 'bar',
                    //     barWidth: 15,
                    //     barGap: '-100%',
                    //     data: defaultData,
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(0, 230, 255, 0)',
                    //             barBorderRadius: 0,
                    //         }
                    //     },
                    // },
                ]
            };
            myEchart.setOption(option);
        },
        // 前端设备告警数据
        getAlarmNotice() {
            let _this = this
            getAlarmNotice().then((res) => {
                _this.initPie(res)
                _this.initPie2(res)
                _this.initPie3(res)
                _this.noticeData = res.data
                console.log(_this.noticeData, "前端设备告警数据表格数据")
            })
        },
        getEnergy() {//项目跟踪矩阵
            let _this = this
            getEnergy().then((res) => {
                _this.initBar(res)
            })
        },
    }
}
</script>


<style lang="scss">
.height230 {
  width: 280px;
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.select {
  width: 180px;
  height: 20px;
  border: 1px solid #62B7FF;
  border-radius: 5px;
}

.pullDown {
  .el-input__inner {
    width: 100%;
    height: 30px !important;
    line-height: 30px;
    display: flex;
    align-items: center;
    background: rgba(98, 183, 255, 0.2);
    box-shadow: inset 0px 0px 12px 0px #62B7FF;
    border: 1px solid #62B7FF;
    color: #fff;
  }

  .el-input__icon {
    //height: 20px !important;
    ////margin-top: 5px;
    //line-height: 20px;
  }

  .el-select-dropdown__list {
    background: #082048;
    box-shadow: inset 0px 0px 12px 0px #62B7FF;
    border: 1px solid #62B7FF;
  }
}


@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }

  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }

  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }

  .height230 {
    height: calHeight_2k(230px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }

  .select {
    height: calHeight_2k(20px);
  }
  .pullDown {
    .el-input__inner {
      height: calHeight_2k(30px);
      line-height: calHeight_2k(30px);
    }

    .el-input__icon {
      //height: calHeight_2k(20px) !important;
      ////margin-top: 5px;
      //line-height: calHeight_2k(20px);
    }
  }

}
</style>
<style lang="scss" scoped>
.pullDown {
  width: 120px;
  margin-left: 50%;
  margin-top: 2%;
}

.minHeight12 {
  min-height: 12px;
  margin-bottom: 5px;
}

.height294 {
  width: 296px;
  height: 294px;
}

.height273 {
  width: 296px;
  height: 290px;
}


.leftView {
  float: left;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  height: 630px;
  align-items: center;
  position: relative;
  z-index: 3;
  cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    &-titleBgc {
      width: 250px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &-pieBox {
      width: 250px;
      height: 52px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      margin-left: 22px;

      &-pieChat {
        width: 52px;
        height: 52px;
      }
    }

    &-pieName {
      width: 250px;
      height: 30px;
      margin-left: 22px;
      display: flex;
      justify-content: space-between;
      text-align: center;
      margin-top: 7px;

      div {
        font-size: 14px;
        font-family: Noto Sans SC-Regular, Noto Sans SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 16px;
      }
    }

    &-line {
      width: 250px;
      height: 3px;
      margin-left: 22px;
      margin-top: 10px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_fenge.png");
    }

    &-giveList {
      width: 250px;
      height: 20px;
      margin-left: 22px;
      margin-top: 4px;
      text-align: center;
      font-size: 19px;
      font-family: Noto Sans SC-Medium, Noto Sans SC;
      font-weight: 500;
      color: #00E6FF;
      line-height: 22px;
    }

    &-table {
      width: 250px;
      height: 94px !important;
      margin-left: 22px;
      font-size: 10px;
      font-family: Noto Sans SC-Medium, Noto Sans SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 10px;

      &-header {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: space-between;
        text-align: center;

        div {
          width: 33.3%;
        }
      }

      &-subject {
        width: 100%;
        height: 64px !important;
        text-align: center;

        &-line {
          width: 100%;
          height: 20px;
          line-height: 20px;
          display: flex;
          justify-content: space-between;

          div {
            width: 33.3%;
          }

          &-status {
            width: 16%;
            display: flex;
            //justify-content: space-between;
            align-items: center;

            &-circle {
              width: 6px !important;
              height: 6px !important;
              background: #37F447;
              border-radius: 4px;
              margin-right: 5px;
              margin-left: 25px;
            }
          }

        }
      }
    }

    &_title1 {
      width: 246px;
      height: 36px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 36px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 36px;
        margin-left: 11px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_title3 {
      width: 246px;
      height: 36px;
      line-height: 36px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 36px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 36px;
        margin-left: 11px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_policy {
      width: 222px;
      height: 52px;
      padding-left: 10px;
      margin-top: 8px;
      margin-left: 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_policy.png");

      &_name {
        height: 15px;
        font-size: 9px;
        overflow: hidden;
        /*超出部分隐藏*/
        text-overflow: ellipsis;
        /*超出部分省略号表示*/
        white-space: nowrap;
        /*强制单行显示*/
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1CFDFF;
        line-height: 15px;
      }

      &_types {
        display: flex;;
        flex-direction: row;
        min-height: 12px;
      }

      &_type {
        margin-bottom: 5px;
        width: 48px;
        display: block;
        height: 12px;
        margin-right: 5px;
        font-size: 7px;
        text-align: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 12px;
      }

      &_bg1 {
        background: linear-gradient(270deg, rgba(226, 80, 63), rgba(231, 10, 91));
      }

      &_num {
        height: 6px;
        font-size: 6px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 6px;
      }
    }
  }

  .energy {
    width: 296px !important;
    height: 314px !important;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    &-titleBgc {
      width: 250px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &-gross {
      width: 250px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #00E6FF;
      margin-top: 10px;
      margin-left: 22px;

      &-right {
        width: 140px;
        height: 28px;
        display: flex;
        justify-content: space-between;

        &-year {
          width: 60px !important;
          height: 20px;
          background: rgba(217, 217, 217, 0.3);
          font-size: 14px;
          font-family: Noto Sans SC-Regular, Noto Sans SC;
          font-weight: 400;
          color: #FFFFFF;
          text-align: center;
          line-height: 20px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }

    &-lineBox {
      width: 260px;
      height: 150px;
      margin-top: 10px;
      margin-left: 18px;
    }
  }

  .manufacture {
    width: 274px !important;
    height: 294px !important;
    background-size: 100% 100%;
    display: flex;
    padding-left: 22px;
    flex-direction: column;

    &-titleBgc {
      width: 250px;
      height: 3px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
      margin-left: 22px;
    }

    &_barBox {
      width: 250px;
      height: 266px;
      margin-left: 22px;
    }
  }

  .site {
    width: 274px !important;
    height: 294px !important;
    background-size: 100% 100%;
    display: flex;
    padding-left: 22px;
    flex-direction: column;

    &_titleBgc {
      width: 250px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_barBox {
      width: 250px;
      height: 266px;
      margin-left: 22px;
    }
  }
}

.industrialChainStyle {
  margin-left: 5%;
  width: 90%;
  height: 240px;
}

.industryStyle {
  width: 100%;
  height: 224px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }

  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }

  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }

  .minHeight12 {
    min-height: calHeight_2k(12px);
    margin-bottom: calHeight_2k(5px);
  }

  .height294 {
    height: calHeight_2k(294px);
  }

  .height273 {
    height: calHeight_2k(290px);
  }


  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &-pieBox {
        height: calHeight_2k(62px);
        margin-top: calHeight_2k(10px);

        &-pieChat {
          height: calHeight_2k(62px);

          div {
            line-height: calHeight_2k(16px);
          }
        }
      }

      &-pieName {
        height: calHeight_2k(40px);
        margin-top: calHeight_2k(7px);
      }

      &-line {
        height: calHeight_2k(3px);
        margin-top: calHeight_2k(10px);
      }

      &-giveList {
        height: calHeight_2k(20px);
        margin-top: calHeight_2k(4px);
        line-height: calHeight_2k(22px);
      }

      &-table {
        height: calHeight_2k(94px);
        margin-top: calHeight_2k(10px);

        &-header {
          height: calHeight_2k(20px);
        }

        &-subject {
          height: calHeight_2k(64px);

          &-line {
            height: calHeight_2k(20px);
            line-height: calHeight_2k(20px);

            &-status {
              &-circle {
                height: calHeight_2k(4px);
              }
            }
          }
        }
      }
    }

    .energy {
      height: calHeight_2k(314px) !important;

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &-gross {
        height: calHeight_2k(30px);
        margin-top: calHeight_2k(10px);
      }

      &-lineBox {
        height: calHeight_2k(150px);
        margin-top: calHeight_2k(10px);
      }
    }

    &_title1 {
      height: calHeight_2k(36px);
      margin-top: calHeight_2k(20px);

      span {
        height: calHeight_2k(36px);
        line-height: calHeight_2k(36px);
      }

    }

    &_title3 {
      height: calHeight_2k(36px);
      line-height: 36px;
      margin-top: calHeight_2k(20px);

      span {
        height: calHeight_2k(36px);
        line-height: calHeight_2k(36px);
      }

    }

    &_policy {
      height: calHeight_2k(52px);
      margin-top: calHeight_2k(8px);

      &_name {
        height: calHeight_2k(15px);
        line-height: calHeight_2k(15px);
      }

      &_types {
        min-height: calHeight_2k(12px);
      }

      &_type {
        width: calHeight_2k(48px);
        margin-bottom: calHeight_2k(5px);
        height: calHeight_2k(12px);
        line-height: calHeight_2k(12px);
      }

      &_bg1 {
      }

      &_num {
        height: calHeight_2k(6px);
        line-height: calHeight_2k(6px);
      }
    }
  }

  .industrialChainStyle {
    height: calHeight_2k(240px);
  }

  .industryStyle {
    height: calHeight_2k(224px);
  }

}

.userFlex {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>
